<template>
  <VDialogContent @submit="submit" title="请上传归档附件完成归档" @close="emit('close')">
    <NScrollbar>
      <div class="content">
        <NForm ref="formRef" require-mark-placement="left" label-placement="left" :rules="rules" :label-width="120"
          :model="formValue" style="width: 800rem" label-align="right">
          <NFormItem label="附件:" path="fileId" style="margin-left: -35rem;">
            <NUpload multiple :custom-request="(e: any) => commonUpload(e)" @remove="(e: any) => commonRemove(e)"
              :default-file-list="imgList">
              <NButton style="width: 115px; margin-bottom: 10rem;margin-left: 10rem;" type="primary" ghost>上传文件
              </NButton>
            </NUpload>
          </NFormItem>
        </NForm>
        <NSpace>
          <span>合同类要求：</span>
          <span style="color: brown">
            请确保上传文件为合同原件的完整扫描件,且双方完成签字和盖章 (包括骑缝章),签订日期明确。
          </span>
        </NSpace>
        <NSpace>
          <span>文件类要求：</span>
          <span style="color: brown">请确保上传文件为已盖章文件的完整扫描件。</span>
        </NSpace>
      </div>
    </NScrollbar>
  </VDialogContent>
</template>

<script setup lang="ts">
import { NScrollbar, cardProps, NSpace, NUpload, useMessage, NForm, NButton, NFormItem, type FormRules } from 'naive-ui'
import { sendRequest } from '@/utils/api'
import { ref, reactive } from 'vue'
import type { UploadFileInfo, UploadCustomRequestOptions, FormInst } from 'naive-ui'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'

const props = defineProps({
  ...cardProps,
  value: {
    type: String,
    required: true
  }
})
const emit = defineEmits<{
  (event: 'close'): void
  (event: 'update'): void
}>()
const message = useMessage()

const formValue = reactive({
  fileId: null
})

const rules: FormRules = {
  fileId: {
    required: true,
    message: '附件不能为空',
    trigger: ['input', 'change']
  },
}

//文件上传
const imgList = ref<UploadFileInfo[]>([])
const commonUpload = async ({
  file,
  onFinish,
  onError,
  onProgress
}: UploadCustomRequestOptions) => {
  const fileData = new FormData()
  fileData.append('file', file.file as File)
  const [error, res] = await sendRequest({
    module: 'upload',
    api: 'uploadFile',
    override: {
      data: fileData,
      onUploadProgress(v: any) {
        onProgress({ percent: v.progress })
      }
    }
  })
  if (error) return message.error(error.message)
  if (res.code !== 0) return message.error('上传失败'), onError()
  imgList.value.push({
    id: res.data.fileId,
    name: res.data.name,
    status: 'finished',
    url: res.data.url
  })
  message.success('上传成功')
  returnPictures()
  onFinish()
}
// 删除附件
async function commonRemove({ file }: { file: UploadFileInfo; fileList: Array<UploadFileInfo> }) {
  const index = imgList.value.findIndex((e: any) => e.name === file.name)
  if (index == -1) return message.error('删除失败')
  imgList.value.splice(index, 1)
  message.success('删除成功')
  returnPictures()
}
//处理图片
function returnPictures() {
  // @ts-ignore
  formValue.fileId = imgList.value.map((i: any) => i.id).join(',')
  console.log(formValue.fileId)
}

//确定
const formRef = ref<FormInst | null>(null)
async function submit() {
  formRef.value?.validate(async (err) => {
    if (err) return
    const [error, res] = await sendRequest({
      module: 'seal',
      api: 'sealApplicationFile',
      override: {
        data: {
          id: props?.value,
          ...formValue
        }
      }
    })
    if (error) return message.error(error.message)
    message.success(res.data)
    emit('update')
    emit('close')
  })
}
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.form_content {
  width: 100%;
  height: 100%;
  padding: 0 20rem 0rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 0 20rem 0rem;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 20rem 0 180rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 130rem;
        background: #e1e1e1;
        padding: 15rem 20rem;

        .userBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: auto;
          min-width: 150rem;
          height: 40rem;
          background-color: #fff;
          border-radius: 4rem;
          padding: 0 10rem;
          margin-right: 20rem;
        }
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}

.draggerBox {
  width: 280rem;
  height: 84rem;
  border-radius: 4rem;
  border: 1rem solid #3d90cc;
  background: transparent;
}

.uploadBox {
  display: flex;
}

:deep(.n-upload-trigger + .n-upload-file-list) {
  width: 530rem !important;
}
</style>
